<template>
  <div>
    <!-- Hero Section -->
    <section class="gradient-bg text-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <div class="text-center">
          <h1 class="text-5xl font-bold mb-6">
            欢迎来到我的个人网站
          </h1>
          <p class="text-xl mb-8 max-w-2xl mx-auto">
            我是一名全栈开发者，专注于创建现代化的Web应用。
            在这里，你可以了解我的项目、技能和经验。
          </p>
          <div class="space-x-4">
            <NuxtLink to="/projects" class="btn-primary">
              查看项目
            </NuxtLink>
            <NuxtLink to="/contact" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg hover:bg-white hover:text-gray-800 transition-colors duration-200">
              联系我
            </NuxtLink>
          </div>
        </div>
      </div>
    </section>

    <!-- About Section -->
    <section class="py-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-3xl font-bold mb-4">关于我</h2>
            <p class="text-gray-600 mb-4">
              我是一名充满激情的开发者，拥有多年Web开发经验。
              我热爱学习新技术，并将其应用到实际项目中。
            </p>
            <p class="text-gray-600">
              我的技术栈包括：Vue.js、Nuxt、Node.js、TypeScript、TailwindCSS等。
              我相信技术的力量可以改变世界，希望通过我的作品为用户带来价值。
            </p>
          </div>
          <div class="card">
            <h3 class="text-xl font-semibold mb-4">技能</h3>
            <div class="space-y-2">
              <div class="flex justify-between">
                <span>前端开发</span>
                <span class="text-blue-500">Vue.js / React</span>
              </div>
              <div class="flex justify-between">
                <span>后端开发</span>
                <span class="text-green-500">Node.js / Express</span>
              </div>
              <div class="flex justify-between">
                <span>数据库</span>
                <span class="text-purple-500">MongoDB / PostgreSQL</span>
              </div>
              <div class="flex justify-between">
                <span>部署</span>
                <span class="text-red-500">Vercel / Docker</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Projects Preview -->
    <section class="py-16 bg-gray-100">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold mb-4">最新项目</h2>
          <p class="text-gray-600">这里展示我最近完成的一些项目</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
          <div class="card">
            <h3 class="text-xl font-semibold mb-2">电商网站</h3>
            <p class="text-gray-600 mb-4">使用Vue.js和Node.js开发的现代化电商平台</p>
            <NuxtLink to="/projects" class="text-blue-500 hover:text-blue-700">
              了解更多 →
            </NuxtLink>
          </div>
          
          <div class="card">
            <h3 class="text-xl font-semibold mb-2">博客系统</h3>
            <p class="text-gray-600 mb-4">基于Nuxt.js的静态博客生成器</p>
            <NuxtLink to="/projects" class="text-blue-500 hover:text-blue-700">
              了解更多 →
            </NuxtLink>
          </div>
          
          <div class="card">
            <h3 class="text-xl font-semibold mb-2">任务管理器</h3>
            <p class="text-gray-600 mb-4">响应式任务管理应用，支持实时协作</p>
            <NuxtLink to="/projects" class="text-blue-500 hover:text-blue-700">
              了解更多 →
            </NuxtLink>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>